﻿@model PhoneBilling.Models.DepartmentSortModel
@{
    ViewBag.Title = "部门排序";
    Layout = "~/Views/Shared/_Layout.cshtml"; 
}
<script type="text/javascript">
    function right() {
        $("select.list option:selected").each(function () {
            $("select.resultList").append("<option value='" + $(this).val() + "'>" + $(this).html() + "</option>");
        });
        $("select.list option:selected").remove();
    }

    function allRight() {
        $("select.list option").each(function () {
            $("select.resultList").append("<option value='" + $(this).val() + "'>" + $(this).html() + "</option>");
        });
        $("select.list option").remove();
    }

    function left() {
        $("select.resultList option:selected").each(function () {
            $("select.list").append("<option value='" + $(this).val() + "'>" + $(this).html() + "</option>");
        });
        $("select.resultList option:selected").remove();
    }

    function allLeft() {
        $("select.resultList option").each(function () {
            $("select.list").append("<option value='" + $(this).val() + "'>" + $(this).html() + "</option>");
        });
        $("select.resultList option").remove();
    }

    function sumbit() {
        if ($("select.list option").length > 0) {
            alert("请把所有部门都移动到右边。");
            return;
        }
        var str = "";
        $("select.resultList option").each(function () {
            if (str == "")
                str += $(this).val();
            else
                str += "!" + $(this).val();
        });
        $("#Result").attr("value", str);

        $("form").submit();
    }
</script>
<style type="text/css">
    .result_left
    {
        float:left;
    }
    .result_middle
    {
        float:left;
        margin: 0px 20px;
        padding-top:100px;
    }
    .result_right
    {
        float:left;
    }
    .result_left select , .result_right select
    {
        width:250px;
    }
</style>
@using (Html.BeginForm())
{ 
    @Html.HiddenFor(m => m.Result, new { @class="Result"});
    <div>
        <div class="result_left">
            <h3 class="tlt">
                原来的部门顺序</h3>
            @Html.ListBoxFor(m => m.List, null, new { @class = "list" })
        </div>
        <div class="result_middle">
            <div class="input-text">
                <input type="button" value=" > " class="input-submit" onclick="right()" />
            </div>
            <div class="input-text">
                <input type="button" value=">>>" class="input-submit" onclick="allRight()" />
            </div>
            <div class="input-text">
                <input type="button" value=" < " class="input-submit" onclick="left()" />
            </div>
            <div class="input-text">
                <input type="button" value="<<<" class="input-submit" onclick="allLeft()" />
            </div>
        </div>
    </div>
    <div class="result_right">
        <h3 class="tlt">
            新的部门顺序</h3>
        @Html.ListBoxFor(m => m.ResultList, null, new { @class = "resultList" })
    </div>
    <div class="clear"></div>
    <div>
        <p class="submit">
            <input type="button" value="确定" class="input-submit" onclick="sumbit()" />
        </p>
    </div>
}